<template>
  <!-- <XtxButton type="plain">按钮</XtxButton> -->
  <!-- <div id="box">這裏寫render生成的真實dom </div> -->

  <router-view />
</template>

<script>
// import { createVNode, render } from 'vue'
// import Message from '@/components/Message'

/**
 * createVNode(h參數)
 * 作用：生成虛擬dom節點（js對象）
 * render
 * 作用：把由createVNode生成的虛擬dom挂在為真實的dom
 * render（createVNode，挂載節點）
 */
// createVNode 生成虚拟dom节点
// h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。它接受三个参数：
// 这是针对html
// const htmlVNode = createVNode(
//   'p', // 标签
//   {
//     class: 'is'// 类名
//   },
//   [
//     '这是文本'// 这是文本
//   ]

// )
// console.log(htmlVNode)// {__v_isVNode: true, __v_skip: true, type: 'p', props: {…}, key: null}展开很多
// const Message1VNode = createVNode(
//   Message,
//   {
//     type: 'error',
//     text: '组件'

//   }
// )
// console.log(Message1VNode)// {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null}
// // render(htmlVNode, document.getElementById('box'))
// setTimeout(() => {
//   render(htmlVNode, document.getElementById('box'))
//   render(Message1VNode, document.getElementById('box'))
// }, 400)
// export default {

// }
</script>
 <style lang="less" >
// // // 6.1手动引入less
// // // @import "~@/style/var.less";
// // .box {
// //   color: @helpColor;
// // }
//
</style>
